<template>
  <div>
    <button @click="comName = 'userName'">用户名登录</button>
    <button @click="comName = 'qrCode'">二维码登录</button>
    <button @click="comName = 'phoneCode'">手机号登录</button>
    <!-- <qr-code></qr-code>
    <user-name></user-name>
    <phone-code></phone-code> -->
    <div>
      <keep-alive include="userName,phoneCode">
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import phoneCode from "./components/phoneCode.vue";
import qrCode from "./components/qrCode.vue";
import UserName from "./components/userName.vue";
export default {
  components: { qrCode, UserName, phoneCode },
  data() {
    return {
      comName: "userName",
    };
  },
};
</script>

<style>
</style>